<script>
	import { page } from '$app/stores';
	import ActiveChannel from '$lib/components/ActiveChannel.svelte';
	import MessageInput from '$lib/components/MessageInput.svelte';

	$: channel = $page?.params?.channel;
</script>

<div class="active-channel">
	<ActiveChannel {channel} />
</div>
<div class="create-message max-h-full">
	<MessageInput {channel} />
</div>

<style>
	.active-channel {
		height: calc(
			100vh - var(--app-bar-height) - var(--interface-padding) - var(--input-row-height)
		);
		overflow: auto;
	}
</style>
